<template>
  <div class="upload">
    <el-upload
      ref="upload"
      list-type="picture-card"
      action="http://localhost:8888/api/upload/upload"
      :class="{ hide: isUpload }"
      :auto-upload="true"
      :limit="limit"
      :file-list="fileList"
      :accept="accept"
      :name="name"
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
    >
      <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
      <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { upload } from '@/api/login';
import axios from 'axios';
export default {
  props: {
    accept: {
      type: String,
      default: 'image/*'
    },
    limit: {
      type: Number,
      default: 1
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      imageUrl: '',
      dialogVisible: false,
      disabled: false,
      isUpload: false,
    }
  },
  methods: {
    handleChange(file, fileList) {
      // 判断上传文件是否达到限制
      this.isUpload = fileList.length >= this.limit;
      // 由于设置自动上传为false,before-upload钩子失效，所以在on-change中检验文件是否符合要求
      const isJPG = ~["image/jpeg", "image/png"].indexOf(file.raw.type);
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 jpg 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      if (!isJPG || !isLt2M) {
        // 不符合直接删除该文件
        this.handleRemove(file);
      }
    },

    // 删除图片
    handleRemove(file) {
      // 上传单张，直接清空fileList
      this.$emit("on-response"); // 此处为了避免直接修改父组件的数据以免产生问题
      // 删除组件有动画功能，设置个延迟显示
      setTimeout(() => {
        this.isUpload = false;
      }, 1000);
    },

    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 文件超出限制的提示
    handleExceed(file, fileList) {
      this.$message.error("文件个数超出限制");
    },

    // 文件上传成功的回调
    handleSuccess(res, fileList) {
      console.log(res);
      this.imageUrl = res.resData.url;
      this.fileList.push({
        name: res.resData.name,
        url: res.resData.url,
      });
      // 通过派发自定义事件 getFileList 向父组件传值
      this.$emit("getFileList", this.fileList);
    },
  },
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  border: 2px dashed #d9d9d9;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #144d9e;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4;
}

.avatar-uploader .el-upload:hover {
  border-color: #8c939d;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>